<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-10-16 14:58
  PageName：i_practice9_index.html
  Function：实战案例 - 设计特效首页
  URL：http://localhost:8080/e3_webpage_CSS3_TextStyle/i_practice9_index.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 设计特效首页</title>

    <style type="text/css">
        body {
            padding: 0px;
            margin: 0px;
            background: black;
            color: #666;
        }

        /* 设计包含框样式 */
        #text-shadow-box {
            position: relative;  /* 定义内部的定位元素以这个框为参照物 */
            width: 598px;
            height: 406px;
            background: #666;
            overflow: hidden;    /* 禁止内容超过设定的区域 */
            border: #333 1px solid;
        }

        /* 设计背景墙样式 */
        #text-shadow-box div.wall {
            position: absolute;
            width: 100%;
            top: 175px;
            left: 0px
        }

        /* 设计导航文本样式 */
        #text {
            text-align: center;
            line-height: 0.5em;
            margin: 0px;
            font-family: helvetica, arial, sans-serif;
            height: 1px;
            color: #999;
            font-size: 80px;
            font-weight: bold;
            text-shadow: 5px -5px 16px #000;
        }

        /* 设计前面挡风板样式 */
        div.wall div {
            position: absolute;
            width: 100%;
            height: 300px;
            top: 42px;
            left: 0px;
            background: #999;
        }

        /* 设计覆盖在上面的探照灯效果图 */
        #spotlight {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            background: url(images/spotlight.png) center -300px;
            font-size: 12px;
        }

        #spotlight a {
            color: #ccc;
            text-decoration: none;
            position: absolute;
            left: 45%;
            top: 58%;
            float: left;
            text-shadow: 1px 1px #999, -1px -1px #333;
        }

        #cat {
            position: absolute;
            top: 130px;
            left: 260px;
            z-index: 1000;
            opacity: 0.5;
        }

        #cat img {
            width: 80px;
        }
    </style>
</head>

<body>
<div id="text-shadow-box">
    <div class="wall">
        <p id="text">黑客帝国</p>
        <div></div>
    </div>

    <div id="spotlight">
        <a href="index.htm">Hacker Home</a>
    </div>

    <div id="cat">
        <img src="images/cat.png">
    </div>
</div>
</body>
</html>